<template>
    <div class="chat-gpt">
        <img
            class="chat-bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/GPT_bj.png"
            alt=""
        />
        <div class="chat-header">
            <div class="left" @click="goIndex">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                    alt=""
                />
                小竹财税AI
            </div>
            <div class="right">
                <template v-if="!isLogin">
                    <i class="el-icon-user"></i>
                    <span @click="goLogin">登录/注册</span>
                </template>
                <template v-if="userInfo">
                    <el-popover
                        placement="bottom-end"
                        width="350"
                        trigger="click"
                        v-model="gnfkVisible"
                    >
                        <gnfk
                            @close="gnfkVisible = false"
                            @submit="gnfkSubmit"
                        ></gnfk>
                        <div slot="reference" style="cursor: pointer">
                            <i class="el-icon-document-checked"></i>
                            功能反馈
                        </div>
                    </el-popover>

                    <el-dropdown @command="handleCommand">
                        <img :src="userInfo && userInfo.avatar" alt="" />
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="user">
                                {{ userInfo.nickname }}
                            </el-dropdown-item>
                            <el-popover
                                placement="left"
                                width="200"
                                trigger="hover"
                            >
                                <img
                                    src="~/assets/images/wx-kefu-code.png"
                                    alt=""
                                    style="width: 174px; height: 174px"
                                />
                                <el-dropdown-item slot="reference" command="kf">
                                    <span>联系客服</span>
                                </el-dropdown-item>
                            </el-popover>
                            <el-dropdown-item command="logout"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </div>
        </div>

        <div class="form">
            <div class="form-title">小竹商业合作咨询</div>
            <div class="form-text">小竹商业客户经理将尽快与您联系</div>
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                label-position="top"
            >
                <el-form-item label="企业名称" prop="company_name">
                    <el-input v-model="ruleForm.company_name"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="tel">
                    <el-input v-model="ruleForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="咨询内容" prop="content">
                    <el-input v-model="ruleForm.content"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button
                        class="button"
                        type="primary"
                        @click="submitForm('ruleForm')"
                        >提交申请</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

import { submitFeedback, logout } from "@/assets/api/indexApi";

import gnfk from "@/components/gpt/gnfk.vue";
import { gpt_business_cooperation_submit } from "@/assets/api/GPT";
var num = 0;
export default {
    components: { gnfk },
    head() {
        return {
            title: "小竹财税AI-商业合作-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹,财税,小竹财税,小竹智能GPT,小竹财税AI",
                },
            ],
        };
    },
    data() {
        return {
            isLogin: false,
            gnfkVisible: false,

            ruleForm: {
                company_name: "",
                name: "",
                tel: "",
                content: "",
            },
            rules: {
                company_name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入联系人姓名",
                        trigger: "blur",
                    },
                ],
                tel: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        trigger: "blur",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入咨询内容",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            goeasyObj: (state) => state.goeasyObj,
        }),
    },
    mounted() {
        let token = localStorage.getItem("token");
        if (token) this.isLogin = true;

        let that = this;
        this.getUserInfo2().then((user) => {});
    },
    methods: {
        ...mapMutations("common", ["setuserInfo"]),
        ...mapActions("common", ["getUserInfo2"]),

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert("submit!");
                    this.gpt_business_cooperation_submit();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        async gpt_business_cooperation_submit() {
            const res = await gpt_business_cooperation_submit(this.ruleForm);
            if (res.code == 1) {
                this.$alert("恭喜您提交成功！", "提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {},
                });
            }
        },

        goIndex() {
            this.$router.push({
                path: "/",
            });
        },

        // 功能反馈
        async gnfkSubmit(content) {
            if (!content) {
                this.$message({
                    message: "请输入反馈内容",
                    type: "warning",
                });
                return;
            }
            const res = await submitFeedback({
                content: content,
            });
            if (res.code == 1) {
                this.gnfkVisible = false;
                this.$message({
                    message: "您的反馈已提交",
                    type: "success",
                });
            }
        },

        handleCommand(command) {
            if (command == "user") {
                // this.$router.push({
                //     path: "/MyQuiz",
                // });
            }
            if (command == "kf") {
                // window.location.href = "https://www.xzcs2022.com/chatlink.html";
            }
            if (command == "logout") {
                this.$confirm("是否退出登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.logout();
                });
            }
        },

        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            localStorage.clear();
            this.isLogin = false;
            this.goeasyObj.pubsub.unsubscribe({
                channel: id,
                onSuccess: function () {},
                onFailed: function (error) {},
            });
        },

        // 前往登录
        goLogin() {
            window.location.href =
                "/login?url=" +
                window.location.pathname +
                window.location.search;
        },
    },
};
</script>
<style>
#meiqia-container {
    position: relative;
    z-index: 999;
}
</style>
<style scoped lang="scss">
@import url("@/assets/static/reset.css");
.chat-gpt {
    // height: 100vh;
    // overflow: hidden;
    box-sizing: border-box;
    position: relative;
    background-color: #f6faff;
    z-index: 1000;
    .chat-bj {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        height: auto;
        width: 100vw;
    }
}

.chat-header {
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 2.75rem;
    background-color: rgba($color: #ffffff, $alpha: 0.5);
    position: relative;
    z-index: 5;
    .left {
        img {
            width: 1.875rem;
            height: 1.875rem;
            padding-right: 0.5rem;
        }
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1c87f3;
    }
    .right {
        cursor: pointer;
        i {
            padding-right: 0.12rem;
            font-size: 1.1rem;
        }
        img {
            width: 2rem;
            height: 2rem;
            border-radius: 2rem;
            margin-left: 1.8rem;
            object-fit: cover;
        }
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 0.875rem;
    }
}

.form {
    margin: 47px auto 0;
    padding-bottom: 40px;
    position: relative;
    z-index: 10;
    width: 600px;
    background: #ffffff;
    border-radius: 20px;
    .form-title {
        font-size: 33px;
        color: #333333;
        text-align: center;
        padding-top: 50px;
    }
    .form-text {
        font-size: 20px;
        text-align: center;
        color: #999999;
        margin-top: 10px;
    }

    .demo-ruleForm {
        width: 450px;
        margin: 50px auto 0;
    }
    .button {
        display: block;
        margin: 20px auto 0;
    }
}
</style>